<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部标题 -->
    <div class="py-4 text-center bg-[#1677ff]">
      <h1 class="text-2xl font-bold text-white">支付结果</h1>
    </div>

    <div class="max-w-md mx-auto p-4">
      <!-- 结果卡片 -->
      <a-card class="mb-4 shadow-sm" :bordered="false">
        <!-- 失败图标 -->
        <div class="text-center mb-6">
          <close-circle-outlined class="text-6xl text-red-500" />
        </div>

        <!-- 结果信息 -->
        <div class="text-center mb-6">
          <h2 class="text-xl font-bold text-gray-800 mb-2">支付失败</h2>
          <p class="text-gray-500">{{ message || '支付未完成' }}</p>
        </div>

        <!-- 订单信息 -->
        <div class="mb-6">
          <a-descriptions bordered>
            <a-descriptions-item label="订单号">
              {{ orderNo }}
            </a-descriptions-item>
          </a-descriptions>
        </div>

        <!-- 重试按钮 -->
        <a-button
          type="primary"
          block
          size="large"
          class="custom-button"
          @click="handleRetry"
        >
          重新支付
        </a-button>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { CloseCircleOutlined } from '@ant-design/icons-vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const orderNo = ref(route.query.orderNo as string)
const message = ref(route.query.message as string)

// 重试按钮点击处理
const handleRetry = () => {
  router.push(`/pay/alipay?orderNo=${orderNo.value}`)
}
</script>

<style scoped>
.ant-card {
  border-radius: 8px;
}

.custom-button {
  height: 44px;
  font-size: 16px;
  border-radius: 8px;
  background-color: #1677ff;
  border-color: #1677ff;
  color: white;
  transition: all 0.3s;
}

.custom-button:hover {
  background-color: #4096ff;
  border-color: #4096ff;
  color: white;
}

.custom-button:active {
  background-color: #0958d9;
  border-color: #0958d9;
  color: white;
}

.ant-descriptions-item-label {
  width: 120px;
  color: #666;
}

.ant-descriptions-item-content {
  color: #333;
}
</style>